<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${userInfo.userName}+的个人主页-未来头条"></title>
    <link rel="stylesheet" href="../static/css/personal_page/personal_page.css" th:href="@{/css/personal_page/personal_page.css}">
    <link rel="stylesheet" href="../static/font_4894039_ann01zlojhq/iconfont.css" th:href="@{/font_4894039_ann01zlojhq/iconfont.css}">
    <link rel="icon" href="../static/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png" th:href="@{/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png}" type="image/png">
</head>
<body>
<span class="alert" style="color: red;"></span>
<!--顶栏-->
<div class="top_bar">
    <div class="top_bar_box">
        <h3>
            <span class="nav-lef-wei">未来</span>
            <span class="nav-lef-text">头条</span>
        </h3>
        <ul class="top_bar_ul">
            <li class="top_bar_li top_bar_li1"><a  th:href="@{/category/2}">关注</a></li>
            <li class="top_bar_li top_bar_li2"><a  th:href="@{/category/1}">推荐</a></li>
            <li class="top_bar_li top_bar_li4"><a  th:href="@{/category/3}">财经</a></li>
            <li class="top_bar_li top_bar_li5"><a  th:href="@{/category/4}">科技</a></li>
            <li class="top_bar_li top_bar_li6"><a  th:href="@{/category/5}">热点</a></li>
            <li class="top_bar_li top_bar_li7"><a  th:href="@{/category/6}">军事</a></li>
            <li class="top_bar_li top_bar_li7"><a  th:href="@{/category/7}">体育</a></li>
        </ul>
        <div style="min-width: 40px;flex-grow: 1;"></div>
        <div class="top_bar_search_box">
            <input type="text" id="top_bar_search" autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly')">
            <button class="search_button">
                <i class="iconfont icon-sousuo"></i>
                <span>搜索</span>
            </button>
        </div>
        <div class="top_bar_NAP">
            <div class="top_bar_news" style="position: relative;">
                <a class="top_bar_news_box" href="">
                    <div class="red_point"></div>
                    <i class="iconfont icon-xiaoxi"></i>
                    <span>消息</span>
                </a>
                <ul class="news_dropdown">
                    <li>消息私信</li>
                    <li>评论和@</li>
                    <li>粉丝</li>
                    <li>点赞</li>
                </ul>
            </div>
            <div class="top_bar_publish" style="position: relative;">
                <a href="" class="top_bar_publish_box">
                    <i class="iconfont icon-tianjia"></i>
                    <span>发布</span>
                </a>
                <ul class="publish_dropdown">
                    <li>写文章</li>
                    <li>发微头条</li>
                </ul>
            </div>
            <div class="top_bar_personal">
                <a href="" class="top_bar_personal_box" th:if="${userInfo.avatar != null}">
                    <img alt="头像" class="profiles" width="30" height="30" th:src="@{${userInfo.avatar}}">
                </a>
                <a href="" class="top_bar_personal_box" th:if="${userInfo.avatar == null}">
                    <img alt="头像" class="profiles" width="30" height="30" th:src="@{/img/default_avatar/image.png}">
                </a>
                <ul class="personal_dropdown">
                    <li>个人主页</li>
                    <li>传作中心</li>
                    <li>退出登录</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--个人主页显式的个人信息-->
<div class="user_information" >
    <div class="user_information_box">
        <div>
            <a href="" class="top_bar_personal_box" th:if="${userInfo.avatar != null}">
                <img alt="头像" class= "profile profiles" width="30" height="30" th:src="@{${userInfo.avatar}}">
            </a>
            <a href="" class="top_bar_personal_box" th:if="${userInfo.avatar == null}">
                <img  alt="头像" class="profile profiles" width="30" height="30" th:src="@{/img/default_avatar/image.png}">
            </a>
            <i class="iconfont icon-vbiao" th:if="userInfo.verifiedStatus==2"></i>
        </div>
        <div class="user_message">
            <span class="user_name" id="user_name" th:text="${userInfo.userName}">用户：676</span>
            <div class="member_sta" th:switch="${userInfo.memberStatus}">
                <span th:case="0">暂未开通会员</span>
                <span th:case="1" style="color: gold;">普通会员</span>
                <span th:case="2" style="color: #ff4500;">超级会员</span>
            </div>  <!--会员开通情况-->
            <div class="user_data">
                <div class="be_praised" style="cursor: auto;"><span th:text="${userInfo.prizeCount}">10086</span>获赞</div>
                <div class="fans" style="margin-left: 20px;"><span th:text="${userInfo.followerCount}">10086</span>粉丝</div>
                <div class="attention" style="margin-left: 20px;"><span th:text="${userInfo.followedCount}">10086</span>关注</div>
            </div>
            <div class="verified_u" th:text="${userInfo.isVerified == 0 ? '未认证' : (userInfo.isVerified == 1 ? '认证中' : (userInfo.isVerified == 2 ? '认证'+userInfo.verContent : (userInfo.isVerified == 3 ? '未认证' : '')))}">认证：官方行走</div>
            <div class="brief_introduction_u" th:text="${'简介：'+(userInfo.introduction==null?'这个人很懒，什么都没留下':userInfo.introduction)}">简介：得失莫念，闲观池里荷绽荷残</div>
            <div class="more_message" id="more_message">
                个人资料
                <i class="iconfont icon-xiangyou-1"></i>
            </div>
        </div>
        <div id="attention" th:class="${userInfo.isFollowed?'concerned':'not-concerned'}"><span id="isAttention" th:text="${userInfo.isFollowed?'互相关注':'关注'}"></span></div>
        <!--not-concerned去关注  取消关注concerned -->
    </div>
</div>

<!--个人主页主题部分：收藏、文章、我的评论.....-->
<div class="main_body">
    <div class="main_left">
        <div class="my_message_title">
            <div class="article_title_box" style="margin-left: 0;">
                <div class="article_title active_mmt my_titles" data-class="article">
                    文章
                </div>
            </div>
            <div class="microheadline_title_box">
                <div class="microheadline_title my_titles" data-class="microheadline">
                    微头条
                </div>
            </div>
            <div class="collection_title_box">
                <div class="collection_title my_titles" data-class="collection">
                    收藏
                </div>
            </div>
            <i class="iconfont icon-sousuo search_my" style="font-size: 22px;"></i>
        </div>
        <div class="search_my_box">
            <i class="iconfont icon-sousuo" style="font-size: 23px;"></i>
            <input type="text" class="search_my_input" placeholder="搜索TA的作品">
            <div id="search_my_confirm">搜索</div>
            <div id="search_my_cancel">取消</div>
        </div>
        <div class="main_content">      <!--放个人主页里面的记录的收藏、文章等等-->
            <div class="without-content" th:if="${#lists.isEmpty(posts)}">
                <i class="iconfont icon-zanwuneirong without-content-img"></i>          <!--当没有内容时展示该内容-->
                <span class="without-content-text">暂无内容</span>
            </div>
            <div class="news-contents" th:each="post : ${posts}">
                <div class="feed-card">
                    <a class="title" th:href="@{/NewsController/{postId}(postId=${post.postId})}" th:text="${post.title}">美国大豆可能将永远失去中国市场 巴西向中国毛遂自荐替代美国</a>
                    <div class="feed-card-bottom">
                        <span class="comments-num" th:text="${post.commentCount} + '评论'">1016评论</span>
                        <span class="post-date" th:text="${post.createdTime}">前天08:17</span>
                    </div>
                </div>
                <div class="news-image">
                    <a th:href="@{/NewsController/{postId}(postId=${post.postId})}" target="_blank" rel="noopener"
                       th:title="${post.title}" aria-hidden="false" tabindex="0">
                        <img th:src="${post.coverImage}" alt="" th:alt="${post.title}">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="main-right">
    </div>
</div>


<!--粉丝/关注列表-->
<div class="showModal_fa"></div>
<div class="tc-fans-attention">
    <div class="fansORattention">
        <div>
            <div class="fans_list_btn">粉丝 <span th:text="${userInfo.followerCount}">0</span></div>
        </div>
        <div>
            <div class="attention_list_btn">关注 <span th:text="${userInfo.followedCount}">0</span></div>
        </div>
        <i class="iconfont icon-quxiao" id="close_fansORattention"></i>
    </div>
    <div class="fans_list">
        <!--        <div class="fans-card">-->
        <!--            <a href="" class="jump-fans-page">-->
        <!--                <div class="fan-avatar-div">-->
        <!--                    <img alt="头像" class="fans-avatar" th:src="@{/img/default_avatar/image.png}">-->
        <!--                </div>-->
        <!--                <div class="fans-info">-->
        <!--                    <span class="fans-name">阿里巴巴</span>-->
        <!--                    <p class="fans-info-f">55w粉丝·未认证</p>-->
        <!--                </div>-->
        <!--            </a>-->
        <!--            <button class="follow-btn"><span>已关注</span></button>-->
        <!--        </div>-->
    </div>
    <div class="attention_list">

    </div>
</div>
<!--个人资料弹窗,_p表示personal-->
<div class="personal_message_tc_box" id="personal_message_tc_box">
    <div class="personal_message_title"> <span th:text="${userInfo.userName}">用户676</span>的个人资料:</div>
    <div class="user_profile_p">
        <img src="../static/img/default_avatar/image.png" alt="头像" class="profiles" th:src="@{${userInfo.avatar}}">
        <i class="iconfont icon-vbiao" th:if="userInfo.isVerified==2"></i>
    </div>
    <i class="iconfont icon-quxiao" id="close_personalMessage"></i>
    <div class="user_name_p div_p" th:text="'昵称：'+${userInfo.userName}">昵称：用户676</div>
    <div class="user_id_p div_p" th:text="'Id：'+${userInfo.userId}">Id：7748411654</div>
    <div class="user_gender_p div_p" th:text="${userInfo.gender == 0 ? '性别：男' : (userInfo.gender == 1 ? '性别：女' : '未设置')}">性别：男</div>
    <div class="user_adress_p div_p" th:text="${'地址：'+userInfo.address}">地址：河南</div>
    <div class="verified_p div_p">
        <span th:text="${userInfo.isVerified == 0 ? '未认证' : (userInfo.isVerified == 1 ? '认证中' : (userInfo.isVerified == 2 ? userInfo.verContent : (userInfo.isVerified == 3 ? '未认证' : '')))}"}>官方认证：未认证</span>
    </div>
    <button class="close_personalMessage2">关闭</button>
</div>

<div id="showModal" class="showModal"></div>            <!--弹窗遮罩-->
<div id="showModal-set" class="showModal"></div>
<script type="text/javascript" th:inline="javascript">
    // 把用户信息存储在全局变量中
        window.userId= /*[[${userInfo.userId}]]*/0;
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>     <!--引入JQ库-->
<script src="../static/js/othersHomePage.js" th:src="@{/js/othersHomePage.js}" th:inline="javascript">
</script>
</body>
</html>